<template>
  <a-modal
    v-model="visible"
    :title="type==='add' ? '新增水果' : '修改水果'"
    :keyboard="false"
    :mask-closable="false"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="名称" prop="name">
        <a-select v-model="form.name" :disabled="type==='modify'">
          <a-select-option v-for="item in fruitOptions" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="单价" prop="unitPrice">
        <a-input v-model="form.unitPrice" style="width:200px" />&nbsp;&nbsp;元/千克
      </a-form-model-item>

      <a-form-model-item label="库存" prop="inventory">
        <a-input v-model="form.inventory" style="width:200px" />&nbsp;&nbsp;千克
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { Modal, FormModel, Select } from 'ant-design-vue'
import { fruits } from '../dict.js'

Vue.use(Modal)
Vue.use(FormModel)
Vue.use(Select)

export default {
  props: {
    type: {
      type: String,
      required: true,
      default () {
        ''
      }
    },

    data: {
      type: Array,
      default () {
        return []
      }
    },

    currRecord: {
      type: Object,
      default () {
        return {}
      }
    }
  },

  data () {
    return {
      visible: false,
      form: {
        name: '',
        unitPrice: '',
        inventory: ''
      },
      rules: {
        name: [
          { required: true, message: '请选择水果', trigger: ['change', 'blur'] }
        ],
        unitPrice: [
          { required: true, message: '请输入单价', trigger: ['change', 'blur'] },
          {
            pattern: /^0.0[1-9]$|^0.[1-9]{1}[0-9]{1}$|^[1-9][0-9]?$|^[1-9][0-9]*$|^[1-9][0-9]?.[0-9]{2}$|^[1-9][0-9]*.[0-9]{2}$/,
            message: '请输入正整数或两位数的正小数',
            trigger: ['change', 'blur']
          }
        ],
        inventory: [
          { required: true, message: '请输入库存', trigger: ['change', 'blur'] },
          {
            pattern: /^0$|^[1-9][0-9]?$|^[1-9][0-9]*$|^0.[0-9]{2}$|^[1-9][0-9]?.[0-9]{2}$|^[1-9][0-9]*.[0-9]{2}$/,
            message: '请输入非负整数或非负的两位数的小数',
            trigger: ['change', 'blur']
          }
        ]
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      fruits
    }
  },

  computed: {
    fruitOptions () {
      if (!this.data.length) {
        return this.fruits
      } else {
        const names = this.data.map(i => i.name)
        return this.fruits.filter(ele => !names.includes(ele))
      }
    }
  },

  watch: {
    visible (newVal) {
      if (newVal) {
        this.init()
        if (this.type === 'modify') {
          this.form = {
            name: this.currRecord.name,
            unitPrice: this.currRecord.unitPrice,
            inventory: this.currRecord.inventory
          }
        }
      }
    }
  },

  methods: {
    init () {
      this.form = {
        name: '',
        unitPrice: '',
        inventory: ''
      }
    },

    onOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.type === 'add') {
            const item = this.form
            item.id = !this.data.length ? 1 : Math.max(...this.data.map(i => i.id)) + 1
            this.$message.success('新增成功')
            this.$emit('addSuccess', item)
            this.onCancel()
          } else if (this.type === 'modify') {
            const item = this.form
            item.id = this.currRecord.id
            this.$message.success('修改成功')
            this.$emit('modifySuccess', item)
            this.onCancel()
          }
        }
      })
    },

    onCancel () {
      this.visible = false
    }
  }
}
</script>
